<template>
  <view class="search-wrap" v-if="keyWordDefault">
    <view class="search-header">
      <uni-icons @click="back" size="30" type="arrow-left"></uni-icons>
      <uni-search-bar v-model="keyWord" bgColor="#fff" :focus="true" radius="100" :placeholder="keyWordDefault"
        clearButton="auto" cancelButton="none" @input="iptHandler" @confirm="search"/>
      <view @click="search" class="text">
        搜索
      </view>
    </view>
    <!-- 搜索列表 -->
    <view v-if="searchResult.length" class="search-list">
      <view @click="chooseRes(item.keyword)" v-for="item,idx in searchResult" :key="idx" class="search-item">
        <uni-icons type="search"></uni-icons>
        <text class="result">{{item.keyword}}</text>
      </view>
    </view>

    <view v-else class="other-info">
      <!-- 历史记录 -->
      <view v-if="$store.state.user.history.length" class="cell history">
        <view class="header">
          <text class="text">搜索历史</text>
          <uni-icons @click="clearHistory" type="trash"></uni-icons>
        </view>
        <view class="body">
          <view @click="chooseRes(item)" v-for="item,index in $store.state.user.history" :key="index" class="item">
            {{item}}
          </view>
        </view>
      </view>
      <view class="cell like">
        <view class="header">
          <text class="text">猜你喜欢</text>
          <uni-icons type="reload"></uni-icons>
        </view>
        <view class="body">
          <view class="item" @click="chooseRes(keyWordDefault)">
            {{keyWordDefault}}
          </view>
        </view>
      </view>
    </view>
    <!-- 热搜榜 -->
    <view v-if="!searchResult.length" class="hot-search">
      <swiper :style="{'height':height}" next-margin="100" :interval="3000" :duration="1000">
        <swiper-item>
          <show-list @click='clickHandler' class="oneDom" :list="hotList" title="热搜榜"></show-list>
        </swiper-item>
        <swiper-item>
          <show-list :list="voiceList" title="有声书榜"></show-list>
        </swiper-item>
        <swiper-item>
          <show-list :list="videoList" title="播客榜"></show-list>
        </swiper-item>
        <swiper-item>
          <show-list :list="hotList" title="主播榜"></show-list>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
  import {
    keyDefault,
    searchSuccess,
    hotSearch,
    anchorList
  } from '@/request/api.js'
  import {
    getCurrentInstance,
    onMounted,
    ref
  } from "vue"
  import {
    voiceList,
    videoList
  } from '@/common/contant.js'
  import {
    useStore
  } from 'vuex'
  import {
    onLoad
  } from "@dcloudio/uni-app"
  const store = useStore()
  const keyWordDefault = ref(null)
  keyDefault().then((res) => {
    keyWordDefault.value = res.data.realkeyword
  })
  const back = () => {
    uni.navigateBack()
  }
  const clearHistory = () => {
    store.commit('user/clearHistory')
  }
  // 完成搜索
  const searchResult = ref([])
  let timer = null
  const iptHandler = (e) => {
    if (chooseFlag.value) {
      chooseFlag.value = false
      return
    }
    if (!e.trim()) {
      searchResult.value = []
      clearTimeout(timer)
      return
    }
    if (timer) { // 防抖
      clearTimeout(timer)
    }
    timer = setTimeout(async () => {
      // 发起请求
      const {
        result
      } = await searchSuccess(e)
      if (result.allMatch) {
        searchResult.value = result.allMatch
      }
    }, 500)
  }
  // 定义关键字
  const keyWord = ref('')
  const search = () => {
    // 点击搜索后 执行 存储搜索历史记录
    const item = keyWord.value || keyWordDefault.value
    store.commit('user/addHistory', item)
    // 跳转搜索结果页
    uni.navigateTo({
      url: '/pages/search-result/search-result?keyWord=' + item
    })
  }
  const chooseFlag = ref(false) // 避免触发input事件
  const chooseRes = (res) => {
    chooseFlag.value = true
    keyWord.value = res
    search()
  }
  const hotList = ref([])
  const tuberList = ref([])
  Promise.all([hotSearch(), anchorList()]).then(res => {
    hotList.value = res[0].data
    res[1].data.list.forEach(v => {
      v.searchWord = v.nickName
    })
    tuberList.value = res[1].data.list

  })
  // swiper动态设置高度
  const height = ref('100vh')
  const _this = getCurrentInstance()
  onMounted(() => {
    setTimeout(() => {
      setHeight()
    }, 0)
  })
  const setHeight = () => {
    const query = uni.createSelectorQuery().in(_this)
    // 开始
    query.select('.oneDom').boundingClientRect(data => {
      if(data && data.height!==0){
            // 获取DOM的高度， 单位是像素
      let h = data.height
      // 补上单位
      h += 'px'
      // 实际高度赋值给swiper
      height.value = h
      } else {
        setHeight()
      }
    }).exec()
  }
  const clickHandler = (key) => {
    chooseRes(key)
  }
</script>

<style lang="less">
  .search-wrap {
    background-color: #F8F9FD;

    .search-header {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .uni-input{
        background-color: pink; 
      }
      uni-search-bar {
        flex: 1;
      }
    }

    .cell {
      padding: 0rpx 30rpx;
      font-size: 28rpx;
      margin-top: 8rpx;

      &.like {
        margin-bottom: 30rpx;
      }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text {
          font-weight: bold;
        }
      }

      .body {
        // padding-top: 15rpx;
        display: flex;
        flex-wrap: wrap;

        .item {
          padding: 0 12rpx;
          height: 46rpx;
          line-height: 46rpx;
          background-color: #fff;
          border-radius: 23rpx;
          margin: 12rpx 8rpx;
          color: #555B69;
        }
      }
    }
  }

  .search-list {
    padding: 0 30rpx;

    .search-item {
      display: flex;
      align-items: center;
      height: 72rpx;
      line-height: 72rpx;
      border-bottom: 1px solid #efefef;
      font-size: 28rpx;

      .result {
        margin-left: 10rpx;
      }
    }
  }

  .hot-search {
    padding: 0 0 30rpx 20rpx;

  }
</style>
